@import './reset';
@import './setting';
@import './flex';
@import './footer';
@import './bottomTab';

@function getvw($w) {
    @return calc($w / 375) * 100+vw;
}

.container {
    width: getvw(375);
    @extend %columnCenter;
    margin-bottom: getvw(51);
    background: #f6f6f6;

    // 头部
    header {
        width: 100%;
        @extend %columnCenter;
        margin-bottom: getvw(10);
        background-color: #ffffff;

        // 导航栏
        nav {
            width: $themWidth;
            @extend %center;
            // background-color: pink;
            position: relative;

            i {
                font-size: getvw(20);
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
            }

            .logoBox {
                margin: getvw(10) 0;

                // background-color: greenyellow;
                img {
                    width: getvw(75);
                }
            }
        }

        .banner {
            img {
                width: getvw(375);
            }
        }
    }

    main {
        background-color: #ffffff;
        width: 100%;
        @extend %columnCenter;
        margin-bottom: getvw(10);

        .titleBox {
            padding-top: getvw(10);
            text-align: center;

            h3 {
                color: #884e22ff;
                font-size: getvw(25);
                font-weight: 400;
            }

            p {
                color: #884e22ff;
                font-size: getvw(16);
                font-weight: 400;
                line-height: getvw(16);
            }
        }

        .content {
            width: 100%;
            padding-top: getvw(15);
            margin-bottom: getvw(25);
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;

            &:last-of-type{
                margin-bottom: 0;
            }

            li {
                a {
                    display: block;

                    img {
                        width: getvw(165);
                    }

                    .title {
                        color: #000000ff;
                        font-size: 14px;
                        font-weight: 400;
                        margin: getvw(2) 0 getvw(4)
                    }

                    .message {
                        @extend %betweenCenter;
                        margin-bottom: getvw(2);

                        p {
                            color: #ff4433ff;
                            font-size: 14px;
                            font-weight: 600;
                        }

                        span {
                            color: #999999ff;
                            font-size: 12px;
                            font-weight: 400;
                        }
                    }
                }
            }
        }
    }
}